<template>
	<view>
		<view class="bw-header-body">
			<view class="u-flex">
				<view style="padding-left:50rpx;">
					<text class="bw-text">累计推广订单</text>
					<view class="bw-view">
						<text class="bw-num">{{lists.length}}</text> 单
					</view>
				</view>
				<view style="padding-right:100rpx;">
					<text class="iconfont icon-biji- rotate" :style="{'font-size':55 + 'px','color':'#ffffff'}"></text>
				</view>
			</view>
		</view>
		
		
		<!-- <text class="bw-text-time">2021-04</text>
		<text class="bw-text-num">本月累计推广订单：1单</text> -->
		<view class="bw-lists">
			<view v-for="(a_item,a_index) in lists" :key="a_index" class="bw-view-lists">
				<view class="bw-list-hader">
					<view class="bw-left">
						<image :src="a_item.user.avatar"></image>
						<text>{{a_item.user.username}}</text>
					</view>
					<view class="bw-right" v-if="a_item.price">
						返佣：<text>￥{{a_item.price}}</text>
					</view>
				</view>
				<view class="bw-list-bottom">
					<view>邀请码：<text>{{a_item.user.invite_code}}</text></view>
					<view>邀请时间：<text>{{a_item.create_time}}</text></view>
				</view>
			</view>
		</view>
		
		<Empty v-if="cut == true"></Empty>
	</view>
</template>

<script>
	import {extendList} from '../../../api/share.js';
	import Empty from 'components/bw-Empty/bw-Empty.vue';
	export default {
		components:{
			Empty
		},
		data(){
			return{
				lists:[],
				req:{
					limit:20, //当前页多少条
					page:1 //当前多少页
				},
				total:0,
				cut:false
			}
		},
		onReachBottom() {
			if(this.lists < this.total){
				this.req.page += 1;
				this.extendList();
			}
		},
		mounted() {
			this.extendList();
		},
		methods:{
			async extendList(){
				const res = await extendList(this.req);
				this.total = res.data.total;
				if(res.data.data.length > 0){
					for(var i=0,len = res.data.data.length; i<len; i++){
						this.lists.push(res.data.data[i]);
					}
					this.cut = false;
				}else{		
					this.cut = true;
				}
				console.log(res);
			}	
		}
	}
</script>

<style>
	page{background-color:#f5f5f5;}
</style>
<style scoped lang="scss">
	@import "../../../iconfont.scss";
	
	page{background-color:#f5f5f5;}
	
	.bw-header-body{
		width:100%;
		padding-bottom:50rpx;
		margin-bottom:50rpx;
		background-color:#ff8704;
		.bw-text{
			color:#FFFFFF;
			font-size:30rpx;
		}
		.bw-view{
			font-size:30rpx;
			color:#FFFFFF;
			padding-top:30rpx;
		}
		.bw-num{
			font-size:55rpx;
		}
		.u-flex{
			padding-top:80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
	
	.bw-lists{
		width:100%;
		background-color:#FFFFFF;
		.bw-view-lists{
			width:95%;
			margin:20px auto;
		}
		.bw-list-hader{
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom:1px solid #dcdcdc;		
		}
		.bw-list-bottom{
			padding:10rpx;
			padding-bottom:20rpx;
			padding-left:20rpx;
			view{
				padding-top:10rpx;
				padding-bottom:5rpx;
				color:#a9a9a9;
				font-size:27rpx;
				font-family: PingFang SC,STHeitiSC-Light,Helvetica-Light,arial,sans-serif,Droid Sans Fallback;
				text{
					color: #575757;
					font-size:28rpx;
				}
			}
		}
		.bw-left{
			height:120rpx;
			display: flex;
			align-items: center;
			padding-left:20rpx;
			image{
				width:65rpx;
				height:65rpx;
				border-radius:50%;
				box-shadow:0 0 9px 3px #d3d3d3;
				border:1px solid #FFFFFF;
			}
			text{
				padding-left:30rpx;
			}
		}
		.bw-right{
			padding-right:20rpx;
			font-size:28rpx;
			text{
				color:#d2913f;
				font-size:30rpx;
			}
		}
	}
	
	.bw-text-time{
		display: block;
		padding:20rpx;
		padding-left:40rpx;
	}
	
	.bw-text-num{
		color:#a9a9a9;
		padding-left:20rpx;
		display: block;
		font-size:27rpx;
		padding-left:40rpx;
	}
</style>
